<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input 文本输入框or按钮</title>
    <!-- 引入表格样式 -->
    <link rel="stylesheet" href="../../css/table_style.css" />

    <!-- 给 table 第1列自动排序号, <table class="num_auto_increase" -->
    <script type="text/javascript" src="../../js/table_num_auto_increase.js"></script>
</head>

<body>
    <h1><font color="red">input 文本输入框or按钮</font></h1>
    属性说明:
    <ol>
        <li>&lt;input <font color="red">type</font>: 输入类型 <br />
            <table border="1px" width="80%" cellspacing="0px" cellpadding="0px" bgcolor="pink" class="num_auto_increase">
                <tr>
                    <th align="center">序号</th>
                    <th align="center">样式, type=</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td align="center"><input type="button" value="这是普通按钮" /></td>
                    <td>button: 普通按钮</td>
                </tr>
                <tr>
                    <td align="center">2</td>
                    <td align="center"><input type="checkbox" checked="checked" /></td>
                    <td>checkbox checked="checked": 复选框</td>
                </tr>
                <tr>
                    <td align="center">3</td>
                    <td align="center"><input type="color" /></td>
                    <td>color: 颜色</td>
                </tr>
                <tr>
                    <td align="center">4</td>
                    <td align="center"><input type="date" /></td>
                    <td>date: ----年/--月/--日</td>
                </tr>
                <tr>
                    <td align="center">5</td>
                    <td align="center"><input type="datetime" /></td>
                    <td>datetime: 错误属性?</td>
                </tr>
                <tr>
                    <td align="center"></td>
                    <td align="center"><input type="datetime-local" /></td>
                    <td>datetime-local: ----年/--月/--日 --时:--分</td>
                </tr>
                <tr>
                    <td align="center"></td>
                    <td align="center"><input type="email" /></td>
                    <td>email: 邮件</td>
                </tr>
                <tr>
                    <td align="center"></td>
                    <td align="center"><input type="file" /></td>
                    <td>file: 文件</td>
                </tr>
                <tr>
                    <td align="center">9</td>
                    <td align="center"><input type="hidden" /></td>
                    <td>hidden: 隐藏字段,用户看不见,但是能提交到后台,例如:用户id</td>
                </tr>
                <tr>
                    <td align="center">10</td>
                    <td align="center"><input type="image" /></td>
                    <td>image: 图片,怎么不能选择?</td>
                </tr>
                <tr>
                    <td align="center">11</td>
                    <td align="center"><input type="month" /></td>
                    <td>month: ----年--月</td>
                </tr>
                <tr>
                    <td align="center">12</td>
                    <td align="center"><input type="number" /></td>
                    <td>number: 整数</td>
                </tr>
                <tr>
                    <td align="center">13</td>
                    <td align="center"><input type="password" /></td>
                    <td>password: 密码</td>
                </tr>
                <tr>
                    <td align="center">14</td>
                    <td align="center">
                        <input type="radio" name="sex" value="1" checked="checked" />男
                        <input type="radio" name="sex" value="1" />女
                    </td>
                    <td>radio checked="checked": 单选按钮</td>
                </tr>
                <tr>
                    <td align="center">15</td>
                    <td align="center"><input type="range" /></td>
                    <td>range: 范围, 进度条</td>
                </tr>
                <tr>
                    <td align="center">16</td>
                    <td align="center"><input type="reset" /></td>
                    <td>reset: 重置,重置同一个&lt;form>表单里的内容</td>
                </tr>
                <tr>
                    <td align="center">17</td>
                    <td align="center"><input type="search" /></td>
                    <td>search: 搜索,多了一个x,清空内容</td>
                </tr>
                <tr>
                    <td align="center">18</td>
                    <td align="center"><input type="submit" /></td>
                    <td>submit: 提交,提交本表单里的内容</td>
                </tr>
                <tr>
                    <td align="center">19</td>
                    <td align="center"><input type="tel" /></td>
                    <td>tel: 电话</td>
                </tr>
                <tr>
                    <td align="center">20</td>
                    <td align="center"><input type="text" /></td>
                    <td>text: 文本(默认)</td>
                </tr>
                <tr>
                    <td align="center">21</td>
                    <td align="center"><input type="time" /></td>
                    <td>time: --时:--分</td>
                </tr>
                <tr>
                    <td align="center">22</td>
                    <td align="center"><input type="url" /></td>
                    <td>url: 地址</td>
                </tr>
                <tr>
                    <td align="center">23</td>
                    <td align="center"><input type="week" /></td>
                    <td>week: ---- 年第 -- 周</td>
                </tr>
            </table>
        </li>

        <li>&lt;input <font color="red">name</font>: 提交表单的key</li>
        <li>&lt;input <font color="red">value</font>: 提交表单的值, 可设置默认值</li>
        <li>&lt;input <font color="red">placeholder</font>: 未输入时提示信息</li>
        <li>&lt;input <font color="red">checked="checked"</font>: type="checkbox/radio"时, 默认选中</li>
        <li>&lt;input <font color="red">maxlength</font>="18" 最大长度</li>
        <li>&lt;input <font color="red">readonly</font>="readonly" 只读,不能输入</li>
        <li>&lt;input <font color="red">required</font>="required" 必填</li>
        <li>&lt;input <font color="red">size="40px"</font>: 控件宽度</li>
    </ol>

    <br />
    <h2>下方表单示例</h2>
    <form action="https://www.baidu.com/s" method="get">
        <table border="1px" cellpadding="0px" cellspacing="0px" width="50%">
            <tr>
                <td colspan="2">
                    <font size="5">会员注册</font>&emsp;USER REGISTER
                </td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" size="35px" name="username" placeholder="请输入用户名"/>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td>
                    <input type="password" size="35px" name="password" placeholder="请输入密码"/>
                </td>
            </tr>

            <tr>
                <td>确认密码</td>
                <td>
                    <input type="password" size="35px" name="repassword" placeholder="请再次输入密码"/>
                </td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
                    <input type="email" size="35px" name="email" placeholder="请输入Email"/>
                </td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>
                    <input type="text" size="35px" name="name" placeholder="请输入姓名"/>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="1" checked="checked"/>男
                    <input type="radio" name="sex" value="0"/>女
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td><input type="date" size="35px" name="birthday"/></td>
            </tr>
            <tr>
                <td>
                    验证码
                </td>
                <td><input type="text" name="yanzhengma" placeholder="请输入验证码"/>
                    <img src="../../img/yanzhengma.png" />
                </td>
            </tr>

            <tr>
                <td></td>
                <td><input type="submit" value="提交" /></td>
            </tr>
        </table>
    </form>
</body>
</html>